<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格样式</title>
    <style>
        
        body{
            font-size: 14px;
        }
        table {
            border-collapse: collapse;
        }

        

        /* tr:nth-child(odd) { */
        tr:nth-child(2n-1) {
            background-color: antiquewhite;
        }

        tr:nth-child(2n){
            background-color: pink;
        }
        
        tr:nth-child(1) {
            background-color: aqua;
        }

        tr:hover {
            background-color: #ddd;
        }

        table,
        tr,
        td {
            border: 2px solid peru;
        }

        .btn {
            background-color: #ccc;
            border: 1px solid black;
            width:5em;
            height: 2em;
            line-height: 2em;
            text-align: center;
            font-weight: bolder;
            /* padding: 0 10px; */
        }

        .btn:hover{
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div>
        <table border="1">
            <tr>
                <td></td>
                <th>NBA东部排名</th>
                <th>NBA西部排名</th>
            </tr>
            <tr>
                <th>1</th>
                <td><a href="#">热火</a></td>
                <td><a href="#">太阳</a></td>
            </tr>
            <tr>
                <th>2</th>
                <td><a href="#">凯尔特人</a></td>
                <td><a href="#">灰熊</a></td>
            </tr>
            <tr>
                <th>3</th>
                <td><a href="#">雄鹿</a></td>
                <td><a href="#">勇士</a></td>
            </tr>
            <tr>
                <th>4</th>
                <td><a href="#">76人</a></td>
                <td><a href="#">独行侠</a></td>
            </tr>
            <tr>
                <th>5</th>
                <td><a href="#">猛龙</a></td>
                <td><a href="#">爵士</a></td>
            </tr>
        </table>
    </div>

    <hr/>

    <div class="btn">
        <span>这是按钮</span>
    </div>
</body>

</html>